<template>
  <div class="pdl-24 pdr-24">
    <div>
      <div class="notice-header df aic fs-30 jcsb">
        <svg-icon icon-class="left" class="fs-30" @click="$router.replace('/dashboard')"></svg-icon>
        <p>历史记录</p>
      </div>
    </div>
    <div class="overflow-xy mt-40">
      <div class="item mb-12 df aic" v-for="item in list" :key="item.id" @click="detail(item)">
        <img :src="item.img" alt="" />
        <div class="mb-8 ml-24">
          <p class="mt-12 mb-24 fs-28 font333 bold">{{ item.title }}</p>
          <p class="mt-12 mb-24 fs-24 font999">{{ item.date }}</p>
          <p class="mt-12 mb-24 fs-24 font999">{{ item.num }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useStore } from '@/store';
  import { SvgIcon } from '@/components/svg-icon';
  import { getSourceList } from '@/api/source';

  export default defineComponent({
    name: 'HistoryComponent',
    components: {
      SvgIcon,
    },
    setup() {
      const route = useRoute();

      const router = useRouter();

      const store = useStore();

      const state = reactive({
        list: [] as any,
      });

      // 去详情页
      const detail = (item) => {
        router.replace(`/detail?id=${item.id}`);
      };

      /**
       * @description 加载表格数据
       */

      onMounted(async () => {
        const res = await getSourceList({});
        state.list = res.list;
      });

      return {
        ...toRefs(state),
        detail,
      };
    },
  });
</script>
<style lang="scss" scoped>
  .notice-header {
    height: 68px;
    &:after {
      content: '';
    }
  }
</style>
